<template>
    <div>
        <div>
            <van-cell-group border>
                <van-cell title="首页" style="text-align:center;"/>
            </van-cell-group>
        </div>
        <div>
            <van-cell-group border>
                <van-cell title="单元格" is-link url="#" />
                <van-cell title="单元格" is-link url="#" />
                <van-cell title="单元格" is-link url="#" />
                <van-cell title="单元格" is-link url="#" />
                <van-cell title="单元格" is-link url="#" />
                <van-cell title="单元格" is-link url="#" />
                <van-cell title="单元格" is-link url="#" />
                <van-cell title="单元格" is-link url="#" />
                <van-cell title="单元格" is-link url="#" />
                <van-cell title="单元格" is-link url="#" />
            </van-cell-group>
        </div>
        <div>
            <van-tabbar v-model="active">
                <van-tabbar-item icon="home">首页</van-tabbar-item>
                <van-tabbar-item icon="photo">相册</van-tabbar-item>
                <van-tabbar-item icon="contact">个人中心</van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Tabbar, TabbarItem,Cell, CellGroup } from 'vant';

Vue.use(Tabbar).use(TabbarItem).use(Cell).use(CellGroup);

export default {
    data(){
        return {
            active:0
        }
    }
}
</script>

